﻿<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
    Inherits="_Default" %>

<%@ Register TagPrefix="uc" Namespace="Taopi.WebComponents" %>
<%@ Register Src="Components/SearchBox.ascx" TagName="SearchBox" TagPrefix="uc" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="Server">
    <link href="Styles/ShopThumbnail.css" rel="Stylesheet" type="text/css" />
    <style type="text/css">
        #container, .columnTitle
        {
            display: table;
            width: 100%;
        }
        
        #container > .column
        {
            display: table-cell;
            width: 50%;
            padding: 5px;
        }
        
        .columnTitle > *
        {
            display: table-cell;
            width: 50%;
        }
        
        #shopPanel
        {
            border-right: 1px grey solid;
        }
        #productPanel
        {
            border-left: 1px grey solid;
        }
        
        .category
        {
            text-align: right;
        }
        
        #searchBar
        {
            margin-top: 10px;
            text-align: right;
        }
        
        .searchBox
        {
            display: inline-block;
        }
        
        .metroHeading
        {
            display: inline-block;
        }
        
        .list
        {
            list-style: none;
            padding-left: 0;
        }
        
        .list > li
        {
            display: inline-block;
            margin: 10px;
            vertical-align: top;
            width: 150px;
        }
    </style>
</asp:Content>
<asp:Content ID="content" ContentPlaceHolderID="MainContent" runat="Server">
    <div id="searchBar">
        <uc:SearchBox ID="searchBox" runat="server" ClientIDMode="Static" />
    </div>
    <div id="container">
        <div id="shopPanel" class="column">
            <div class="columnTitle">
                <h2 class="metroHeading">
                    Shops</h2>
                <span class="category"><a href="Categories.aspx?t=shop">All Categories</a></span>
            </div>
            <asp:SqlDataSource ID="topShopSource" runat="server" ConnectionString="<%$ ConnectionStrings:ASPNETDBConnectionString %>"
                SelectCommand="SELECT top(20) * FROM [RatedShop] ORDER BY [rating] DESC"></asp:SqlDataSource>
            <asp:Repeater runat="server" DataSourceID="topShopSource">
                <HeaderTemplate>
                    <ul class="list">
                </HeaderTemplate>
                <ItemTemplate>
                    <li>
                        <uc:ShopThumbnail ShopName='<%# Eval("name") %>' ShopCategory='<%# Eval("category") %>'
                            CoverPhoto='<%# Eval("coverPhoto") %>' Owner='<%# Eval("owner") %>' runat="server" />
                    </li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </div>
        <div id="productPanel" class="column">
            <div class="columnTitle">
                <h2 class="metroHeading">
                    Products</h2>
                <span class="category"><a href="Categories.aspx?t=product">All Categories</a></span>
            </div>
            <asp:SqlDataSource ID="topProductSource" runat="server" ConnectionString="<%$ ConnectionStrings:ASPNETDBConnectionString %>"
                SelectCommand="SELECT top(20) * FROM [RatedProduct] ORDER BY [rating] DESC" />
            <asp:Repeater runat="server" DataSourceID="topProductSource">
                <HeaderTemplate>
                    <ul class="list">
                </HeaderTemplate>
                <ItemTemplate>
                    <li>
                        <uc:ProductThumbnail runat="server" ProductName='<%# Eval("name") %>' ProductId='<%# Eval("id") %>'
                            CoverPhoto='<%# Eval("CoverPhoto") %>' Owner='<%# Eval("owner") %>' />
                    </li>
                </ItemTemplate>
                <FooterTemplate>
                    </ul>
                </FooterTemplate>
            </asp:Repeater>
        </div>
    </div>
</asp:Content>
